<template>

  <div class="main">
    <div class="header">
      <div class="logo">WQJ-LAB</div>
      <div class="buttons">
        <el-button class="button" @click="showLoginDialog">登录</el-button>
        <el-button type="primary" class="button" @click="showRegisterDialog">免费注册</el-button>
      </div>
    </div>
    <div class="title">免费在线流程图思维导图</div>
    <div class="content">专业强大的作图工具，支持多人实时在线协作，可用于原型图、UML、BPMN、网络拓扑图等多种图形绘制</div>
    <el-button type="primary" class="button" @click="functionSelect">免费使用</el-button>




    <el-dialog title="登录" :visible="loginDialogVisible" @close="closeLoginDialog">
      <el-form ref="loginForm" :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeLoginDialog">取消</el-button>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </div>
    </el-dialog>

    <el-dialog title="注册" :visible="registerDialogVisible" @close="closeRegisterDialog">
      <el-form ref="registerForm" :model="registerForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registerForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeRegisterDialog">取消</el-button>
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
export default {
  name: 'Hello',
  data() {
    return {
      loginDialogVisible: false,
      registerDialogVisible: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    showLoginDialog() {
      this.loginDialogVisible = true;
    },
    closeLoginDialog() {
      this.loginDialogVisible = false;
    },
    handleLogin() {
      // 处理登录逻辑
      console.log('登录成功');
      this.closeLoginDialog();
    },
    showRegisterDialog() {
      this.registerDialogVisible = true;
    },
    closeRegisterDialog() {
      this.registerDialogVisible = false;
    },
    handleRegister() {
      // 处理注册逻辑
      console.log('注册成功');
      this.closeRegisterDialog();
    }
  }

}
</script>

<style scoped>


.login-register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1vh;
}

.dialog-footer {
  text-align: right;
}


.main {

}

.title {
  text-align: center;
  color: black;
  font-size: 50px;
  font-weight: bold;
  width: 100%;
  margin-top: 250px;
}
.content {
  text-align: center;
  color: grey;
  font-size: 25px;
  font-weight: 100;
  width: 100%;
  margin-top: 35px;
}
.button {
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
  margin-left: 900px;
}

</style>
